<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8" />
		<!-- 移动设备的支持 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- ie8 标准版的渲染模式 -->
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<title>个人博客-博文目录</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/catlog.css"/>
		<link rel="icon" href="img/面具.ico" type="image/x-icon">
		<link rel="shortcut icon" href="img/面具.ico" type="image/x-icon">
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<c:if test="${empty list}">
		<c:redirect url="menu.do"></c:redirect>
	</c:if>
	<body>
		<!-- 导航条 -->
		<div class="head-nav"></div>
		<!-- 导航条结束 -->
		<section>
			<article class="container" id="app">
				<div class="row">
					<div class="col-sm-12" id="backimg">
						<h2 class="title">博文目录</h2>
						<i class="title-underline"></i>
						<ul class="list-unstyled" >
							<template v-if="pageList.contentList.length<25">
							<li v-for="item in pageList.contentList"><span>{{item.createTime}}</span><a :href="'info.do?aid='+item.aid">{{item.title}}</a></li>
							<li v-for="item,index in 25-pageList.contentList.length"><span>2020-01-{{index+1>=10?index+1:"0"+(index+1)}}</span><a href="#">会敲代码的男人<small style="font-size: 0.8em; color: #ADADAD;">(补位专用)</small></a></li>
							</template>
							<template v-else>
								<li v-for="item in pageList.contentList"><span>{{item.createTime}}</span><a :href="'info.do?aid='+item.aid">{{item.title}}</a></li>
							</template>
							
							<!--每一页只显示25个-->
						
						</ul>
					
						<nav aria-label="Page navigation" class="text-center">
						  <ul class="pagination">
						    <li >
						      <a @click="pageClick(pageList.indexPage-1)" aria-label="Previous" class="btn" :class="pageList.indexPage>1?'':'disabled'">
						        <span aria-hidden="true">&laquo;</span>
						      </a>
						    </li>
								<li v-for="index in indexs" :class="{'active': pageList.indexPage==index}"><a @click="pageClick(index)" >{{index}}</a></li>
						    <li>
						      <a @click="pageClick(pageList.indexPage+1)" aria-label="Next" class="btn" :class="pageList.totalPageCount==pageList.indexPage?'disabled':''">
						        <span aria-hidden="true">&raquo;</span>
						      </a>
						    </li>
							
						  </ul>
						</nav>
					</div>
				</div>
			</article>
		</section>
		<!-- 脚注 -->
		<div class="myfooter"></div>
		<script type="text/javascript">
			var $j=jQuery.noConflict();
			jQuery(document).ready(function($){
				//导入nav
				$(".head-nav").load("import/nav.html",function(){
					$(".head-nav ul li:eq(1)").addClass('active');
				})
				//导入footer
				$(".myfooter").load("import/footer.html")
			//下划线边长
			$(".title").hover(function(){
				$(this).next().animate({"padding-left":"80px"},500)
			},function(){
				$(this).next().animate({"padding-left":"40px"},500)
			})
			
			})
		</script>
		<script type="text/javascript">
			const vm=new Vue({
				el:"#app",
				data:{
					pageList:${list},
				},
				methods:{
					//上一页和下一页和请求页
					pageClick(cur){
						//传过来的页码一定要不等于当前页码
						if(cur!=vm.pageList.indexPage){
							$j.post("menu.do","cur="+cur,function(e){
								vm.pageList=e
							},"json")
						}
					}
				},
				computed:{
					//分页
					indexs: function(){
						var left = 1;
						var right = this.pageList.totalPageCount;//总页数
						var ar = [];
						if(this.pageList.totalPageCount>= 5){
								if(this.pageList.indexPage > 3 && this.pageList.indexPage < this.pageList.totalPageCount-2){
								left = this.pageList.indexPage - 2
								right = this.pageList.indexPage + 2
							}else{
							if(this.pageList.indexPage<=3){
								left = 1
								right = 5
							}else{
								right = this.pageList.totalPageCount
								left = this.pageList.totalPageCount -4
							}
						}
					}
						while (left <= right){
							ar.push(left)
							left ++
						}
						return ar
					}
				}
			})
		</script>
	</body>
</html>
